<template>
	<!-- 积分兑换组件 -->
		<!-- 图片 -->
		<view  @click="handleToDetail(point.info._id)">
			
		
		<!-- <navigator url="../points-details/points-details" hover-class="navigator-hover"> -->
		<view class="img">
			<image :src="'http://localhost:3001/images/'+point.info.images" mode=""></image>
			
		</view>
		<!-- 卡券文字 -->
		<text class="yinpin_name">
			{{point.info.couponName}}
		</text>
		<!-- 积分下部分 -->
		<view class="jifen_buttom">	
			<view>
				<text class="zhi">{{point.info.lifespan}}</text>
				<text>积分</text>
				<view class="jifen_c">
				  <text class="zhio">剩{{point.info.count}}张</text>
				  <button>兑换</button>	
				</view>
			</view>
		</view>
		<!-- </navigator> -->
</view>
</template>

<script setup>
	
	import{onMounted, ref,defineProps} from"vue"
	import {getCoupon} from "../../services/points.js";
	  
	  let point = defineProps(["info"]);	
	const handleToDetail = async (id) => {
		console.log(id);
		let data = await getCoupon();
		data = data.result.filter(item=>item._id==id);
		console.log(data);
		uni.navigateTo({
					url:'/pages/points-details/points-details?data='+ encodeURIComponent(JSON.stringify(data))
				})
	}
	
</script>

<style>


	button {
		margin: 0 10rpx 20rpx 0;
		padding: 0rpx;
		height: 50rpx;
		width: 100rpx;
		border-radius: 40rpx;
		background-color: #0550c8;
		font-size: 20rpx;
		color: #ffffff;
	}

	image {
		height: 330rpx;
		width: 330rpx;
	}

	/* 下面内容 */
	.neirong {
		display: flex;
		background-color: #f8f8f8;
	}

	.img {
		height: 330rpx;
		width: 330rpx;
		margin-bottom: 10rpx;
	}

	.titi {
		height: 180rpx;
		width: 100%;
		background-color: #f8f8f8;
	}

	.titles {
		height: 65rpx;
		width: 100%;
		display: flex;
		justify-content: space-between;
		background-color: #f8f8f8;
		align-items: center;
	}

	.titles>text:nth-child(1) {
		margin-left: 30rpx;
		font-size: 36rpx;
		font-weight: 500;
	}

	.titles>text:nth-child(2) {
		font-size: 25rpx;
		color: #999999;
		margin-right: 30rpx;
		font-weight: 400;

	}

	.yinpin {
		margin-left: 30rpx;
		background-color: #ffffff;
		width: 330rpx;
		height: 500rpx;
		border-radius: 15rpx;
	}

	.yinpin_name {
		font-size: 30rpx;
		font-weight: 800;
	}

	.yinpin>image {
		margin: auto;
	}

	.jifen_buttom {
		margin-top: 10rpx;
		width: 330rpx;
		height: 100rpx;
	}

	.jifen_buttom>text {
		margin-top: 5rpx;
	}

	.zhi {
		font-size: 35rpx;
		color: #0550c8;
		font-weight: 800;
		margin-left: 10rpx;
		margin-right: 5rpx;
	}

	.zhio {
		font-size: 22rpx;
		color: #c5c5c5;
		margin: 10rpx 0 0 10rpx;
	}

	.zhioo {
		font-size: 30rpx;
		color: #848484;
	}

	.zhiooo {
		margin-left: 380rpx;
		font-size: 22rpx;
		color: #848484;
	}

	.jifen_c {
		display: flex;
		justify-content: space-between;
	}

</style>